<clr-modal [(clrModalOpen)]="deleteModal" [clrModalSize]="'lg'">
  <h3 class="modal-title">确认删除</h3>
  <div class="modal-body">
    <p>删除操作不可恢复,确认要删除用户:
      <span *ngFor="let user of selected">{{user.username}}</span>
    </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn" (click)="deleteModal = false">取消</button>
    <button type="button" class="btn btn-primary" (click)="confirmDelete()">确认</button>
  </div>
</clr-modal>
<clr-datagrid [clrDgLoading]="loading" [clrDgSelected]="selected">
  <clr-dg-action-bar>
    <clr-button-group>
      <clr-button type="button" class="btn btn-sm btn-secondary" (click)="addNewUser()">
        <clr-icon shape="plus" size="16"></clr-icon>
        添加
      </clr-button>
      <clr-button type="button" class="btn btn-sm btn-secondary" [disabled]="selected.length === 0"
                  (click)="onDelete()">
        <clr-icon shape="close"></clr-icon>
        删除
      </clr-button>
    </clr-button-group>

  </clr-dg-action-bar>
  <clr-dg-column>用户名</clr-dg-column>
  <clr-dg-column>邮箱</clr-dg-column>
  <clr-dg-column>超级管理员</clr-dg-column>
  <clr-dg-column>启用</clr-dg-column>


  <clr-dg-row *ngFor="let user of users | filterCurrentUser:currentUser" [clrDgItem]="user">
    <clr-dg-cell>{{user.username}}</clr-dg-cell>
    <clr-dg-cell>{{user.email}}</clr-dg-cell>
    <clr-dg-cell><span *ngIf="user.is_superuser">是</span><span *ngIf="!user.is_superuser">否</span></clr-dg-cell>
    <clr-dg-cell>
      <input clrToggle type="checkbox" name="active" [(ngModel)]="user.is_active" (change)="toggleActiveUser(user)"/>
    </clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>

  </clr-dg-footer>

</clr-datagrid>
